<template>
  <div class="App">
    <h1 class="content">我是APP</h1>
    <input type="text" ref="iptEle" />
    <button @click="getMsg">获取输入框的值</button>
    <Count />
  </div>
</template>

<script>
import Count from "@/components/Count";
export default {
  name: "App",
  components: {
    Count,
  },
  methods: {
    /* 
      点击按钮收集表单的值:
        - 推荐方法,把表单和数据进行数据双向绑定,直接获取数据的值即可
        - ref方法,获取到表单的元素,进行DOM操作

      ref的使用:
        - 如果想要获取某个真实DOM,则在当前模板元素上添加一个ref属性,值为一个字符串名称
        - 当模板渲染后,在当前的组件实例上的$refs对象中,就会有一个当前字符串名称的属性,值为被设置ref的真实DOM
    */
      getMsg() {
        console.log(this);
        console.log(this.$ref.iptEle.value);
      },
  },
};
</script>